<template>
	<view class="content">
		<uni-notice-bar text="统计结果包含结束时间当天" single color="#2979FF" background-color="#EAF2FF"/>
		<view class="search-box">
			<uni-datetime-picker v-model="range" type="daterange" :end="today" @change="handleChangeDate"/>
		</view>
		<view class="chart-wrap">
			<uni-section type="line" title="收益分析"></uni-section>
				<view class="fun-tabs">
					<view class="tab-item">
						<view class="item-name">交易金额</view>
						<view class="item-val">{{showData.saleAmount || 0}}</view>
					</view>
					<view class="tab-item">
						<view class="item-name">订单笔数</view>
						<view class="item-val">{{showData.saleOrderNum || 0}}</view>
					</view>
				</view>
				<view class="fun-tabs">
					<view class="tab-item">
						<view class="item-name">退款金额</view>
						<view class="item-val-r">{{showData.refundAcmount || 0}}</view>
					</view>
					<view class="tab-item">
						<view class="item-name">退款笔数</view>
						<view class="item-val-r">{{showData.refundOrderNum || 0}}</view>
					</view>
				</view>
		</view>
		<view>
			<qiun-data-charts
				canvas2d
				type="line"
				:opts="opts"
				:chartData="lineData"
			/>
		</view>
		<view>
			<uni-section type="line" title="设备销售">
				<template v-slot:right>
					<view class="a" @click="toMore('machine')" v-if="goodsList.length > 0">查看更多></view>
				</template>
				<uni-list border-full v-if="machineList.length > 0">
					<uni-list-item
						v-for="(item, index) in machineList"
						:key="index"
						showExtraIcon 
						:extraIcon="{color: iconColors[index],size: '22',type: 'vip-filled'}" 
						:title="item.machineName" 
						:note="item.machinePlace" 
						:rightText="`¥${item.saleAmount}`"
					/>
				</uni-list>
				<EmptyView v-else/>
			</uni-section>
			<uni-section type="line" title="商品销售">
				<template v-slot:right>
					<view class="a" @click="toMore('goods')" v-if="goodsList.length > 0">查看更多></view>
				</template>
				<uni-list border-full v-if="goodsList.length > 0">
					<uni-list-item
						v-for="(item, index) in goodsList"
						:key="index"
						showExtraIcon
						:extraIcon="{color: iconColors[index],size: '22',type: 'vip-filled'}" 
						:title="item.goodsName" 
						:note="`规格：${item.goodsWeight}g`" 
						:rightText="`¥${item.salesCount}`"
					/>
				</uni-list>
				<EmptyView v-else/>
			</uni-section>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	import EmptyView from "@/components/EmptyView"
	
	export default {
		components: {
			EmptyView
		},
		data() {
			return {
				iconColors: ['#D9D919','#E6E8FA','#B87333'],
				opts: {
					padding: [15, 15, 15, 15],
					animation: false,
					dataLabel: false,
					dataPointShape: true,
					dataPointShapeType: 'hollow',
					xAxis: {
						disableGrid: true,
						labelCount: 5,
						splitNumber: 5,
						titleFontSize: 12
					},
					yAxis: {
						data: [
							{
								min: 0
							}
						]
					},
					extra: {
						line: {
							width: 1
						}
					}
				},
				lineData: {},
				showData: {},
				range: [],
				today: "",
				machineList: [],
				goodsList: []
			}
		},
		
		onShow() {
			let uid = uni.getStorageSync('uid');
			if(!uid) {
				uni.reLaunch({
					url:'/pages/user/login'
				})
			}
			
			this.today = moment().format('YYYY-MM-DD')
			
			if(this.range.length == 0) {
				this.range = [moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
			}
			
			this.initData()
		},
		
		methods: {
			moment,
			
			async initData() {
				
				uni.showLoading({
					title: '加载中...'
				})
				
				await this.getLineData()
				await this.getMachineTop()
				await this.getGoodsTop()
				
				uni.hideLoading()
			},
			
			async getLineData() {
				await uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/getCountDetail',
					data: {
						merchantId: uni.getStorageSync('mid'),
						startDate: this.range[0],
						endDate: this.range[1]
					},
					success: res => {
						if(res.data.success) {
							this.showData = {
								refundAcmount: res.data.result.refundAcmount,
								refundOrderNum: res.data.result.refundOrderNum,
								saleAmount: res.data.result.saleAmount,
								saleOrderNum: res.data.result.saleOrderNum,
							}
							
							let dataList = res.data.result.detail
							let dateLong = moment(this.range[1]).diff(moment(this.range[0]), 'day');
							
							let categories = []
							let amountData = []
							let saleData = []
							
							for(let i=0;i<=dateLong;i++) {
								let day = moment(this.range[0]).add(i, "days").format('YYYY-MM-DD')
								
								let dayData = dataList.find( item => item.date == day )
								
								if(!dayData) {
									dayData = {
										date: day,
										saleOrderNum: 0,
										saleAmount: 0,
									}
								}
								
								categories.push(dayData.date.slice(-5))
								amountData.push(dayData.saleOrderNum)
								saleData.push(dayData.saleAmount)
							}
							
							this.lineData = {
								categories,
								series: [
									{ name: '订单数', data: amountData },
									{ name: '交易额', data: saleData }
								]
							}
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			async getMachineTop() {
				await uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/machineSellCountOrder',
					data: {
						merchantId: uni.getStorageSync('mid'),
						startDate: this.range[0],
						endDate: this.range[1],
						pageNo: 1,
						pageSize: 3
					},
					success: res => {
						if(res.data.success) {
							this.machineList = res.data.result.records
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			async getGoodsTop() {
				await uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/goodsSaleCountOrder',
					data: {
						merchantId: uni.getStorageSync('mid'),
						startDate: this.range[0],
						endDate: this.range[1],
						pageNo: 1,
						pageSize: 3
					},
					success: res => {
						if(res.data.success) {
							this.goodsList = res.data.result.records
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			handleChangeDate( e ) {
				if(e.length > 0) {
					this.range = e
					this.initData()
				}
			},
			
			toMore(type) {
				uni.navigateTo({
					url: `/pages/statistics/list?type=${type}&startDay=${this.range[0]}&endDay=${this.range[1]}`
				})
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
	}
	
	.search-box {
		padding: 20rpx;
	}


	.chart-wrap {
		width: 100%;
		box-sizing: border-box;
		background-color: #ffffff;
		padding: 32rpx 0rpx;
		border-radius: 20rpx;

		.fun-tabs {
			display: flex;
			justify-content: space-around;
			margin-top: 20rpx;
			
			.tab-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.item-name {
					color: #6d6d6d;
					font-size: 24rpx;
				}

				.item-val {
					color: #00aa00;
					font-size: 28rpx;
					font-weight: bold;
					margin-top: 20rpx;
				}
				
				.item-val-r {
					color: #ff5500;
					font-size: 28rpx;
					font-weight: bold;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>